let canvas1 = document.getElementById('canvas1');
let context1 = canvas1.getContext('2d');
canvas1.width = window.innerWidth;
canvas1.height = window.innerHeight;

let canvas2 = document.getElementById('canvas2');
let context2 = canvas2.getContext('2d');
canvas2.width = window.innerWidth;
canvas2.height = window.innerHeight;

let backGroundColor = 'rgb(36, 74, 101)';
context1.fillStyle = backGroundColor;
context1.fillRect(0, 0, canvas1.width, canvas1.height);

let startPoint = {
	x: undefined,
	y: undefined,
};
let endPoint = {
	x: undefined,
	y: undefined,
};
let using = false;
let clearable = false;
let eraserSize = 16;
let lineWidth = 16;
let lineColor = 'black';
let lineColorOl = document.querySelector('.line-color');
let lineColorLis = lineColorOl.querySelectorAll('li');
let lineWeightOl = document.querySelector('.line-weight');
let lineWeightLis = lineWeightOl.querySelectorAll('li');
let eraserWidthOl = document.querySelector('.eraser-width');
let eraserWidthLis = eraserWidthOl.querySelectorAll('li');

drawGrid(canvas1, context1, 30, '#ccc', 5);
// drawAndCleanLine(canvas2, context2, lineWidth, 'purple')

pen.addEventListener('click', function () {
	pen.classList.add('active');
	eraser.classList.remove('active');

	clearable = false;

	document.body.style.cursor = `url('img/pen32.ico') 0 32, auto`;
	eraserWidthOl.style.display = 'none';
	lineColorOl.style.display = 'block';
	lineWeightOl.style.display = 'block';
});

eraser.addEventListener('click', function () {
	eraser.classList.add('active');
	pen.classList.remove('active');

	clearable = true;

	document.body.style.cursor = `url('img/eraser32.ico') 16 16, auto`;
	eraserWidthOl.style.display = 'block';
	lineColorOl.style.display = 'none';
	lineWeightOl.style.display = 'none';
});

clear.addEventListener('click', function () {
	context2.clearRect(0, 0, canvas2.width, canvas2.height);
});

save.addEventListener('click', function () {
	let url = canvas2.toDataURL('image/png');
	let a = document.createElement('a');
	document.body.appendChild(a);
	a.href = url;
	a.target = '_blank';
	a.download = '我的画图';
	a.click();
});

eraser16.addEventListener('click', function () {
	document.body.style.cursor = `url('img/eraser16.ico') 8 8, auto`;
	eraserSize = 8;
});

eraser32.addEventListener('click', function () {
	document.body.style.cursor = `url('img/eraser32.ico') 16 16, auto`;
	eraserSize = 16;
});

eraser48.addEventListener('click', function () {
	document.body.style.cursor = `url('img/eraser48.ico') 24 24, auto`;
	eraserSize = 24;
});

eraser64.addEventListener('click', function () {
	document.body.style.cursor = `url('img/eraser64.ico') 32 32, auto`;
	eraserSize = 32;
});

for (let i = 0; i < lineColorLis.length; i++) {
	lineColorLis[i].addEventListener('click', function () {
		for (let i = 0; i < lineColorLis.length; i++) {
			if (lineColorLis[i].classList.value.indexOf('active') != -1) {
				lineColorLis[i].classList.remove('active');
			}
		}
		lineColorLis[i].classList.add('active');
		lineColor = lineColorLis[i].getAttribute('color');
		for (let i = 0; i < lineWeightLis.length; i++) {
			lineWeightLis[i].style.backgroundColor = lineColor;
		}
	});
}

for (let i = 0; i < lineWeightLis.length; i++) {
	lineWeightLis[i].addEventListener('click', function () {
		for (let i = 0; i < lineWeightLis.length; i++) {
			if (lineWeightLis[i].classList.value.indexOf('active') != -1) {
				lineWeightLis[i].classList.remove('active');
			}
		}
		lineWeightLis[i].classList.add('active');
		lineWidth = lineWeightLis[i].getAttribute('weight');
	});
}

function drawGrid(canvas, context, gridSpace, gridLineColor, LineDashStyle) {
	let xLines = Math.floor(canvas.width / gridSpace);
	let yLines = Math.floor(canvas.height / gridSpace);
	// 画横线
	for (let i = 0; i <= xLines; i++) {
		context.beginPath();
		context.moveTo(0, 0 + i * gridSpace);
		context.lineTo(canvas.width, 0 + i * gridSpace);
		context.lineWidth = 1;
		context.setLineDash([`${LineDashStyle}`]);
		context.strokeStyle = gridLineColor;
		context.stroke();
	}
	// 画竖线
	for (let i = 0; i <= xLines; i++) {
		context.beginPath();
		context.moveTo(0 + i * gridSpace, 0);
		context.lineTo(0 + i * gridSpace, canvas.height);
		context.lineWidth = 1;
		context.setLineDash([`${LineDashStyle}`]);
		context.strokeStyle = gridLineColor;
		context.stroke();
	}
}

// function drawAndCleanLine(canvas, context, lineWidth, color) {
canvas2.addEventListener('mousedown', function (e) {
	using = true;
	startPoint.x = e.clientX;
	startPoint.y = e.clientY;
	if (clearable) {
		clearArc(e.clientX, e.clientY, eraserSize, context2);
	}
});

canvas2.addEventListener('mousemove', function (e) {
	if (using) {
		endPoint.x = e.clientX;
		endPoint.y = e.clientY;
		if (clearable) {
			let x = Math.abs(endPoint.x - startPoint.x);
			let y = Math.abs(endPoint.y - startPoint.y);

			clip(context2, canvas2, eraserSize);
		} else {
			context2.beginPath();
			context2.moveTo(startPoint.x, startPoint.y);
			context2.lineTo(endPoint.x, endPoint.y);
			context2.strokeStyle = lineColor;
			context2.lineWidth = lineWidth;
			context2.lineCap = 'round';
			context2.lineJoin = 'bevel';
			context2.stroke();
		}
		startPoint.x = endPoint.x;
		startPoint.y = endPoint.y;
	}
});

canvas2.addEventListener('mouseup', function () {
	using = false;
});
// }

function clip(context, myCanvas, eraserSize) {
	let asin =
		eraserSize * Math.sin(Math.atan((endPoint.y - startPoint.y) / (endPoint.x - startPoint.x)));
	let acos =
		eraserSize * Math.cos(Math.atan((endPoint.y - startPoint.y) / (endPoint.x - startPoint.x)));
	let x3 = startPoint.x + asin;
	let y3 = startPoint.y - acos;
	let x4 = startPoint.x - asin;
	let y4 = startPoint.y + acos;
	let x5 = endPoint.x + asin;
	let y5 = endPoint.y - acos;
	let x6 = endPoint.x - asin;
	let y6 = endPoint.y + acos;

	//保证线条的连贯，所以在矩形一端画圆
	context.save();
	context.beginPath();
	context.arc(endPoint.x, endPoint.y, eraserSize, 0, 2 * Math.PI);
	context.clip();
	context.clearRect(0, 0, myCanvas.width, myCanvas.height);
	context.restore();

	//清除矩形剪辑区域里的像素
	context.save();
	context.beginPath();
	context.moveTo(x3, y3);
	context.lineTo(x5, y5);
	context.lineTo(x6, y6);
	context.lineTo(x4, y4);
	context.closePath();
	context.clip();
	context.clearRect(0, 0, myCanvas.width, myCanvas.height);
	context.restore();
}

function clearArc(x, y, r, context) {
	//(x,y)为要清除的圆的圆心，r为半径，cxt为context
	let stepClear = 1;
	clearArc(x, y, r);

	function clearArc(x, y, radius) {
		var calcWidth = radius - stepClear;
		var calcHeight = Math.sqrt(radius * radius - calcWidth * calcWidth);

		var posX = x - calcWidth;
		var posY = y - calcHeight;

		var widthX = 2 * calcWidth;
		var heightY = 2 * calcHeight;

		if (stepClear <= radius) {
			context.clearRect(posX, posY, widthX, heightY);
			stepClear += 1;
			clearArc(x, y, radius);
		}
	}
}
